import React, { memo, useEffect } from 'react'
// 导入连接 ui和容器组件的方法
import { connect } from "react-redux"

// 导入需要触发的actions
import {
    incAction,
    decAction,
    getBanners
} from "@/store/actionCreators.js"

function Home(props) {
    useEffect(() => {
        getData()
    }, [])

    async function getData() {
        props.getBanners()
    }
    return (
        <div>
            <h1>
                home
            </h1>
            <div>
                <ul>
               {
                    props.banners && props.banners.map(item => {
                        return <li key={item.id}>
                            {item.name}
                        </li>
                    })
               }
                </ul>
            </div>
            <p>
                直接在props上使用即可
                count-----{props.counter}
            </p>
            {/* props.dispatch 需要拿到 incAction() 执行后的值 */}
            <button onClick={() => { props.incActionS() }}>+1</button>
            <button onClick={() => { props.decActionS() }}>-1</button>
        </div>
    )
}

const mapStateToProps = state => {
    return {
        counter: state.counter,
        banners:state.banners
    }
};
const mapDispatchToProps = dispatch => ({
    // 构造相关方法 来触发actions中的方法
    incActionS: function () {
        dispatch(incAction())
    },
    decActionS: function () {
        dispatch(decAction())
    },
    // 这儿用于触发异步的方法，会自动去调用getBanners
    getBanners:function () {
        dispatch(getBanners)
    }

})

export default connect(mapStateToProps, mapDispatchToProps)(memo(Home))
